<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4">
        <SideTree
          :treeData="treeData"
          @nodeClick="nodeClick"
          @onAddClick="handleAdd"
          @onDelClick="handleDel"
          :useButton="true"
          :propsOptions="{
            label: 'riskAnalysisName',
            children: 'children',
          }"
        ></SideTree>
      </el-col>
      <el-col :span="20">
        <FxdxVue
          v-if="isShowFxdx"
          :parentNode="fxdyParent"
          @row-click="onFxdxClick"
        ></FxdxVue>
        <FxpcVue
          v-show="!isShowFxdx"
          :parentNode="fxpcParent"
          @onBackClick="isShowFxdx = true"
        ></FxpcVue>
      </el-col>
    </el-row>

    <DialogVform
      :formJson="formJson"
      ref="dialogVform"
      :slots="['deptSlot', 'userSlot']"
      @onSubmit="onSubmit"
      :title="dialogType == 'add' ? '新增风险分析对象' : '修改风险分析对象'"
    >
      <template #deptSlot>
        <el-form-item
          label="责任人部门"
          prop="responsibilityDeptId"
          label-position="right"
        >
          <TreeSelect
            v-model="form.responsibilityDeptId"
            :options="deptTree"
            @change="changeDept"
          ></TreeSelect>
        </el-form-item>
      </template>
      <template #userSlot="{ form }">
        <el-form-item
          label="选择责任人"
          prop="responsibilityUserId"
          label-position="right"
          required
        >
          <el-select @change="userIdChange" v-model="form.responsibilityUserId">
            <el-option
              v-for="user in userList"
              :value="user.userId"
              :label="user.nickName"
            ></el-option>
          </el-select>
        </el-form-item>
      </template>
    </DialogVform>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import DialogVform from "@/components/dialogVform/index";
import { fxdx as APIS } from "@/api/hdanger/fxfxqd/index.js";
import formJson from "./components/fxdx.json";
import SideTree from "@/components/SideTree";
import TreeSelect from "@/components/TreeSelect/index";
import { listUser, getUser, deptTreeSelect } from "@/api/system/user";
import { useAsyncData } from "@/views/hooks/useAsyncData.js";
import FxdxVue from "./components/fxdy.vue";
import FxpcVue from "./components/fxpc.vue";
const { proxy } = getCurrentInstance();
const dialogVform = ref();
const treeData = ref([]);
const fxdyParent = ref({});
const deptTree = ref([]);
const userList = ref([]);
const isShowFxdx = ref(true);
const fxpcParent = ref({});
const getList = () => {
  APIS.query({
    pageNum: 1,
    pageSize: 99999999,
  }).then((res) => {
    console.log(res);
    treeData.value = [
      {
        riskAnalysisName: "全部",
        id: "",
        children: res.rows.map((ele) => ({
          ...ele,
          children: [],
          label: ele.dangerName,
        })),
      },
    ];
  });
};
const changeDept = (val, label) => {
  form.value.responsibilityDeptId = val;
  form.value.responsibilityDeptName = label;
  if (val) {
    listUser({
      pageNum: 1,
      pageSize: 5000000,
      deptId: val,
    }).then((res) => {
      userList.value = res.rows;
    });
  }
};
const userIdChange = (val) => {
  if (val) {
    const user = userList.value.find((user) => user.userId === val);
    form.value.responsibilityUserName = user.nickName;
  } else {
    form.value.responsibilityUserName = "";
  }
};
function nodeClick(data) {
  fxdyParent.value = data.node;
  form.value.dangerId = data.key;
  queryParams.value.dangerId = data.key;
}
const onFxdxClick = (row) => {
  isShowFxdx.value = false;
  nextTick().then(() => {
    fxpcParent.value = row;
  });
};
const plugEdit = (row) => {};
const table = ref();
onMounted(() => {
  deptTreeSelect().then((res) => {
    deptTree.value = res.data;
  });
  getList();
});
const {
  onSubmit,
  dialogType,
  handleAdd,
  handleEdit,
  handleDel,
  form,
  queryParams,
} = useAsyncData({
  APIS,
  formJson,
  dialogVform,
  table,
  proxy,
  plugEdit,
  reSetGetList: getList,
});
</script>

<style lang="scss" scoped>
::v-deep.el-form-item__label {
  text-align: right !important;
}
</style>
